import {View, Button, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './top.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import {AtIcon, message} from 'taro-ui';
import 'taro-ui/dist/style/components/icon.scss';
import messageIcon from '@/assets/image/index/i_message.png';
import searchIcon from '@/assets/image/index/w_search.png';
import addressIcon from '@/assets/image/index/top-address.png';
import rightIcon from '@/assets/image/index/top-right.png';

type ITopProps = T.IProps & T.ITopProps;
//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState>(store2Props, actions)
export default class Info extends Component<Partial<ITopProps>, T.ITopState> {
  constructor(props: ITopProps) {
    super(props);
    this.state = {
      navBarHeight: 0,
      navBarPd: 0,
    };
  }

  componentWillMount() {
    this.getNavHeight();
  }

  getNavHeight() {
    let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
    let menuBottonHeight = menuButtonObject.height;
    let menuBottonTop = menuButtonObject.top;
    let navBarHeight = (menuBottonTop + menuBottonHeight) * 2;

    this.setState({
      navBarHeight,
      navBarPd: menuBottonTop,
    });
  }

  render() {
    let {
      main: {communityName, unReadNum, memberCardType},
      actions: {action},
    } = this.props;
    return (
      <View className="PageIndexTop">
        <View className={`PageIndexTop-bg PageIndexTop-bg-${memberCardType}`}></View>
        <View
          className="r_sb"
          style={{paddingTop: `${this.state.navBarPd * 2}rpx`, height: `${this.state.navBarHeight}rpx`}}
        >
          <View
            className="t_row"
            onClick={() =>
              Taro.navigateTo({
                url: `/pages/package-A/select-address/index`,
              })
            }
          >
            <Image className="addressIcon" src={addressIcon} mode="widthFix" />
            <Text className="fc_32">{communityName}</Text>
            <Image className="rightIcon" src={rightIcon} mode="widthFix" />
          </View>
        </View>
        <View
          className="search_box"
          onClick={() => {
            let itemStr = Taro.getStorageSync('b2b-wechat@login');
            if (!itemStr) {
              Taro.navigateTo({
                url: '/pages/package-C/login/login/index',
              });
              return;
            }
            if (Taro.getStorageSync('blacklistModel')) {
              action.commonChange('main.blacklistModel', true);
              return;
            }
            Taro.navigateTo({
              url: `/pages/package-A/search/index`,
            });
          }}
        >
          <Image className="search_icon" src={searchIcon} mode="widthFix" />
          <Text className="search_text">请输入关键字搜索</Text>
        </View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
